import React from 'react';
import {Menu} from 'antd';
import { withRouter } from "react-router-dom";
import { adminRoutes } from "../../../router";
import {connect} from "react-redux"
const { SubMenu } = Menu;

function SliderBar(props){
  
  const handleMenu=(obj)=>{
    let key=obj.key
    props.history.push(key)
  }

  let role = props.userReducer.userInfo.role

  return (
    <Menu theme="dark" mode="inline" defaultSelectedKeys={['/admin']}>
      {
        adminRoutes.map((item,index)=>{
          let bool=item.roles.includes(role) //判断访问权限
          if(bool && item.title){ //渲染菜单
            return item.children ?
              <SubMenu key={index} title={item.title} >
                {
                  item.children.map((itm, idx) => {
                    let bool=itm.roles.includes(role)
                    if(bool && itm.title){
                      return <Menu.Item key={itm.path} icon={itm.icon} onClick={handleMenu}>{itm.title}</Menu.Item>
                    }else{
                      return ""
                    }        
                  })
                }

              </SubMenu>
              :
              <Menu.Item key={item.path} icon={item.icon}>{item.title}</Menu.Item>
          }else{ //不渲染菜单
            return ""
          }
        })
      }
    </Menu>
  )
}

const mapStateToProps=(state)=>{
  return state
}

export default connect(mapStateToProps)(withRouter(SliderBar))

